<template>
  <view class="bill-list">
    <view v-if="today.paymentList.length === 0" class="kong">今日无记账</view>
    <view
      v-for="(item, index) in today.paymentList"
      :key="index"
      class="list-box"
      :style="{
        height: `${btn === 1 && moveState === 4 && clickList.index === index ? '0%' : '15%'}`,
        marginBottom: `${btn === 1 && moveState === 4 && clickList.index === index ? '0%' : '2.5%'}`,
        transition: `${moveState !== -2 ? 'all ease 0.5s' : ''}`,
      }"
      @touchstart="GetMoveIndex(index)"
    >
      <view
        class="board"
        :style="{
          // height: `${btn === 1 && moveState === 4 && clickList.index === index ? '0%' : '100%'}`,
          transform: `translate(${clickList.index === index ? (Math.abs(clickList.move)>20?-clickList.move:'0px') : 0}px)`,
          transition: `${moveState !== -2 && (moveState === 4 || moveState === 3 || clickList.move === 0 || clickList.index !== index) ? 'all ease 0.5s' : ''}`,
        }"
      >
        <view class="modify" @tap="Mod(index)">修改</view>
        <view
          class="list-box-content"
          :style="{border:`2px solid ${Number(item.price)<0?'rgb(228, 192, 12)':'white'}`}"
          @touchstart="TouchList"
          @touchmove="TouchMoveList"
          @touchend="TouchEndList"
        >
          <view v-if="item.label.name !== ''" class="list-item">
            <view
              class="tap"
              :style="{
                background: `${item.label.background}`,
                color: `${item.label.color}`,
              }"
            >
              &nbsp;{{ item.label.name }}&nbsp;
            </view>
          </view>
          <view v-if="item.name !== ''" class="list-item">{{ item.name }}</view>
          <view class="list-item">¥ {{ Number(item.price)<0? -Number(item.price):item.price}}</view>
          <view class="list-item">{{ item.time }}</view>
        </view>
        <view
          class="del"
          :style="{
            width: `${btn === 1 && moveState === 4 && clickList.index === index ? '95%' : '20%'}`,
            transition: `${moveState !== -2 ? 'all ease 0.5s' : ''}`,
          }"
          @tap="Del(index)"
          >删除</view
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
import type { todayType } from '@/types/bill';
import { useBillStore } from '@/stores/bill';

//变量区
const billStore = useBillStore();
let today = ref<todayType>({
  year: 0,
  month: 0,
  day: 0,
  paymentList: [],
});
let clickList = ref({
  start: 0,
  move: 0,
  index: -1,
});
let touchMove: number = 0;
let touchMoveTemp: number = 0;
let moveState = ref<number>(-1);
let btn = ref<number>(-1);
const systemInfo = uni.getSystemInfoSync();
const screenWidth = systemInfo.screenWidth;

////函数区
onLoad(() => {
  console.log('cin Load');
  Init();
});
onShow(() => {
  console.log('cin Show');
});
onHide(() => {
  console.log('cin Hide');
});

//删除账单项
function Del(index: number) {
  moveState.value = 4;
  touchMove = 0.22 * screenWidth;
  touchMoveTemp = 0;
  clickList.value.move = touchMove;
  btn.value = 1;
  setTimeout(function () {
    // 删除账单
    billStore.DelDayBill(
      today.value.year,
      today.value.month,
      today.value.day,
      index,
    );

    // 获得今日账单
    today.value = billStore.GetDayData(
      today.value.year,
      today.value.month,
      today.value.day,
    );

    // 如果没有账单则打开输入框
    if (today.value.paymentList.length === 0) {
      uni.$emit('openCin');
    }

    // 更新中心面板
    uni.$emit('upDateBoard');

    moveState.value = -2;
    clickList.value.move = 0;
    clickList.value.index = -1;
    btn.value = -1;
  }, 500);
}
//修改账单项
function Mod(indexTemp: number) {
  btn.value = 2;
  uni.$emit('modBill', {
    year: today.value.year,
    month: today.value.month,
    day: today.value.day,
    data: today.value.paymentList[indexTemp],
    index: indexTemp,
  });
}
//修改账单完成
uni.$on('modBillOver', function () {
  uni.$emit('upDateBoard');
  setTimeout(function () {
    clickList.value.move = 0;
    moveState.value = -1;
    clickList.value.index = -1;
  }, 500);
});

//绑定拖动的index
function GetMoveIndex(index: number) {
  //是否是已经点击的
  if (clickList.value.index !== index) {
    clickList.value.index = index;
    clickList.value.move = 0;
    moveState.value = 0;
  }
}

//拖动账单项
function TouchMoveList(event: TouchEvent) {
  //记录拖动数值
  touchMove = clickList.value.start - event.touches[0].clientX + touchMoveTemp;
  clickList.value.move = touchMove;

  //侧按钮出现一半
  if (Math.abs(clickList.value.move) >= 40) {
    moveState.value = 2;
  }
  //侧按钮消失一半
  if (Math.abs(clickList.value.move) < 40) {
    moveState.value = 0;
  }
  //侧按钮出来大半
  if (Math.abs(clickList.value.move) >= 120) {
    moveState.value = 4;
  }
}

//离开账单项
function TouchEndList() {
  switch (moveState.value) {
    //复位
    case 0:
      touchMove = 0;
      moveState.value = -1;
      clickList.value.index = -1;
      touchMoveTemp = 0;
      break;
    //可以出现按钮
    case 2:
      if (clickList.value.move > 0) {
        touchMove = 0.22 * screenWidth;
      } else {
        touchMove = -0.22 * screenWidth;
      }
      touchMoveTemp = touchMove;
      moveState.value = 3;
      break;
    //最终复位
    case 3:
      touchMove = 0;
      moveState.value = -1;
      clickList.value.index = -1;
      touchMoveTemp = 0;
      break;
    case 4:
      if (clickList.value.move > 0) {
        touchMove = 0.22 * screenWidth;
        touchMoveTemp = 0;
        Del(clickList.value.index);
      } else Mod(clickList.value.index);
      break;
  }
  clickList.value.move = touchMove;
}

//触摸账单项
function TouchList(event: TouchEvent) {
  //绑定起点
  clickList.value.start = event.touches[0].clientX;
}

//初始化
function Init() {}
//获取数据
uni.$on('dayData', function (data) {
  today.value = data;
  let temp = billStore.GetDayData(
    today.value.year,
    today.value.month,
    today.value.day,
  );
  today.value = temp;
});
</script>

<style scoped>
.bill-list {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(247, 247, 247);
}
.list-box {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 2.5%;
}
.kong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -150%);
  color: rgb(118, 118, 118);
}
.board {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modify {
  width: 20%;
  left: -22%;
  position: absolute;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgb(209, 133, 20);
  border-radius: 5px;
  font-size: 25rpx;
  margin: 2%;
}
.del {
  width: 50px;
  right: -22%;
  position: absolute;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 5px;
  font-size: 25rpx;
  margin: 2%;
  background: rgb(178, 36, 36);
}
.list-box-content {
  overflow: hidden;
  width: 94%;
  height: 93%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  border-radius: 12px;
}
.list-item {
  display: flex;
  justify-content: start;
  align-items: center;
  max-width: 20%;
  overflow: auto;
  height: 100%;
  font-size: 30rpx;
  white-space: nowrap;
}
.tap {
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  border-radius: 10px;
}
</style>
